<template>
  <div class="ranking_list" :style="{ background: `#3473ff url(${this.img}) no-repeat fixed top center` }">
    <div class="ranking_list_container">
      <el-table :border="false" :data="alldata.columnData" style="width: 95%;margin:20px auto"  class="custom-table-header">
        <el-table-column v-if="alldata.type && alldata.type === '排序表格'" type="index" align="center" :resizable="false" label="" width="50" :header-cell-style="{background:'#000',color:'#409EFF'}">
          <template slot-scope="scope">
            <span v-if="scope.$index+1 == 1">
              <span class=" order1">
                <img src="@/assets/top1.png" style="width:30px" />
              </span>
            </span>
            <span v-else-if="scope.$index+1 == 2">

              <span class=" order2">

                <img src="@/assets/top2.png" style="width:30px" />
              </span>
            </span>
            <span v-else-if="scope.$index+1 == 3">

              <span class="order3">

                <img src="@/assets/top3.png" style="width:30px" />
              </span>
            </span>
            <span v-else>

              <div class="sortOrder">{{scope.$index + 1}}</div>
            </span>
          </template>
        </el-table-column>
        <el-table-column v-for="col in alldata.columnNames" :label="col.label" :prop="col.prop" :key="col.label">
          <template slot-scope="scope">
            <div style="font-weight:bold;font-size:16px">{{scope.row[col.prop]}}</div>
            <div style="font-size:12px" v-if="col.prop==='销售员'">商务一部</div>

          </template>
        </el-table-column>
      </el-table>
      <!-- <ol class="sort_list">
                <li class="sort_item sort_item_title">
                    <span v-for="name_label in alldata.columnNames">{{ name_label.label }}</span>
                </li>
                <li class="sort_item" v-for="(item, index) in alldata.columnData" :key="index" >
                    <span v-for="name_item in alldata.columnNames">{{ item[name_item.prop] }}</span>
                </li>
            </ol> -->
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import qs from 'qs'
import * as dd from 'dingtalk-jsapi'
import { Toast } from 'vant'
Vue.use(Toast)

export default {
  name: 'rankinglist',
  data() {
    return {
      alldata: this.$route.params.alldata,
      img: null,
    };
  },
  created: function () {
    //console.log('created......')
    let _this = this
    document.title = this.$route.query.stitle
    //console.log('document.title', document.title)
    if (dd.env.platform !== 'notInDingTalk') {
      dd.ready(function () {
        dd.biz.navigation.setTitle({
          title: _this.$route.query.stitle
        })
      })
    }
  },
  mounted: function () {
    //console.log('alldata: ', this.alldata)
    this.img = this.alldata.img
    //console.log('img', this.img)
  },
  methods: {

  }
};
</script>
<style lang="less">
.ranking_list {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /*background: #3473ff url(http://localhost:8080/common/images/topicon/rank1.png);*/
  .ranking_list_container {
    width: 92vw;
    height: 80vh;
    // padding: 5px;
    border-radius: 20px 20px 0 0;
    background: #fff;
    // overflow: hidden;
    overflow: auto;
    .sort_list {
      height: 100%;
      overflow: auto;
      .sort_item {
        display: flex;
        justify-content: space-around;
        height: 60px;
        line-height: 60px;
        span {
          width: 140px;
          &:nth-child(2) {
            text-align: center;
          }
        }
        &:nth-child(n + 2) {
          border-bottom: 1px solid #eee;
          span {
            &:nth-child(1)::before {
              content: "";
              display: inline-block;
              width: 36px;
              height: 41px;
              vertical-align: middle;
            }
          }
        }
        &:nth-child(2) {
          span {
            &:nth-child(1)::before {
              content: "";
              /*background: url(http://localhost:8080/common/images/topicon/top1.png);*/
              background: url(/common/images/topicon/top1.png);
            }
          }
        }
        &:nth-child(3) {
          span {
            &:nth-child(1)::before {
              content: "";
              /*background: url(http://localhost:8080/common/images/topicon/top2.png);*/
              background: url(/common/images/topicon/top2.png);
            }
          }
        }
        &:nth-child(4) {
          span {
            &:nth-child(1)::before {
              content: "";
              /*background: url(http://localhost:8080/common/images/topicon/top3.png);*/
              background: url(/common/images/topicon/top3.png);
            }
          }
        }
      }
      .sort_item.sort_item_title {
        position: sticky;
        top: 0;
        background: #fff;
        font: normal 400 16px "Microsoft YaHei";
        text-align: center;
        color: #000;
        height: 40px;
        line-height: 40px;
      }
    }
  }
}
</style>
